import React, {Component,} from 'react';
import {connect,} from 'react-redux';
import {formatDate, formatDateWithDot, handleDateChange,} from "../../../../utils/dateService";
import FootballGameCard from "../../../../shared-components/FootballGameCard/FootballGameCard";
import ReactDOM from "react-dom";
import DateTabs from "../../../../shared-components/DateTabs/DateTabs";
import NoDataPage from "../NoDataPage/NoDataPage";
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../../../redux/game";
import EventFilterList from "../EventFilterList/EventFilterList";

class GameResult extends Component{
    constructor(props) {
        super(props)
        this.today = formatDate(new Date())
        this.tabPosition = this.props.tabPosition[2].result
        // this.status = 'live'
        this.state = {
            tabs: [
                {value: formatDate(handleDateChange(this.today, -3)), title: formatDateWithDot(handleDateChange(this.today, -3)), active: this.tabPosition === 0,},
                {value: formatDate(handleDateChange(this.today, -2)), title: formatDateWithDot(handleDateChange(this.today, -2)), active: this.tabPosition === 1,},
                {value: formatDate(handleDateChange(this.today, -1)), title: formatDateWithDot(handleDateChange(this.today, -1)), active: this.tabPosition === 2,},
                {value: this.today, title: '今天', active: this.tabPosition === 3,},
            ],
            // currentTab: this.tabs.find(tab => tab.active === true),
            // listCompleted: false,
        }
    }

    componentDidMount() {
        // 获取数据
        const currentTab = this.state.tabs.find(tab => tab.active === true)
        const date = currentTab.value
        const dateGames = this.props.game.games[date].matches

        // const status = this.status
        if (date && dateGames.length === 0) {
            const doFetchGameListAll = this.props.doFetchGameListAll
            doFetchGameListAll({date,})
        }

    }

    // componentDidUpdate(prevProps, prevState, snapshot) {
    //
    //     // const prevDate = prevState.currentTab.value
    //     // const currentDate = this.state.currentTab.value
    //     const prevDate = prevState.tabs.find(tab => tab.active === true).value
    //     const currentDate = this.state.tabs.find(tab => tab.active === true).value
    //     console.log(prevDate, currentDate)
    //     const dateGames = this.props.game.games[currentDate] ? this.props.game.games[currentDate].matches : []
    //     // const status = this.status
    //     if (prevDate !== currentDate && dateGames.length === 0) {
    //         // this.setState({
    //         //     listCompleted: false,
    //         // })
    //         this.props.doFetchGameListAll({date: currentDate,})
    //     }
    // }

    // fetchPrevSection = () => {
    //     const containerDom =  ReactDOM.findDOMNode(this.container)
    //     const date = this.state.currentTab.value
    //     const status = this.status
    //     const doFetchGameList = this.props.doFetchGameList
    //     const diff = containerDom.scrollHeight - containerDom.scrollTop
    //     const hei = containerDom.clientHeight
    //
    //     const currentGames = this.props.game.games[date] === undefined
    //         ? []
    //         : this.props.game.games[date].live
    //
    //     const lastEvaluatedKey = currentGames === undefined || currentGames.lastEvaluatedKey === null || currentGames.lastEvaluatedKey === undefined || currentGames === []
    //         ? {matchId: '',}
    //         : currentGames.lastEvaluatedKey
    //
    //     const isMoreData = lastEvaluatedKey.matchId.length > 0
    //
    //     if (isMoreData) {
    //
    //         this.setState({
    //             listCompleted: false,
    //         })
    //
    //         if (diff === hei) {
    //             doFetchGameList({
    //                 date,
    //                 status,
    //                 lastEvaluatedKey,
    //             })
    //         }
    //     } else {
    //         this.setState({
    //             listCompleted: true,
    //         })
    //     }
    // }


    onTabSelected = index => {
        const tabs = this.state.tabs
        let tab
        for (let i = 0; i < tabs.length; i++) {
            if (i === index) {
                tabs[i].active = true
                tab = tabs[i]
            } else {
                tabs[i].active = false
            }
        }
        this.setState({
            tabs: tabs,
            // currentTab: tab,
        })

        // const prevDate = prevState.tabs.find(tab => tab.active === true).value
        const currentDate = this.state.tabs.find(tab => tab.active === true).value
        // console.log(prevDate, currentDate)
        const dateGames = this.props.game.games[currentDate] ? this.props.game.games[currentDate].matches : []
        // const status = this.status
        if (dateGames.length === 0) {
            // this.setState({
            //     listCompleted: false,
            // })
            this.props.doFetchGameListAll({date: currentDate,})
        }

        this.props.changeGameTabPosition({
            position: index,
            depth: 2,
            type: 'result'
        })
        // this.props.changeEventFilter({
        //     eventFilters: [],
        // })
    }

    // cleanGameList = games => {
    //     let result = []
    //     let matchIds = games.map(game => game.matchId)
    //     let uniqueMatchIds = Array.from(new Set(matchIds))
    //     if (uniqueMatchIds.length === games.length) {
    //         return games
    //             .filter(game => game.status !== 0)
    //             .filter(game => game.matchGroupType === 1)
    //             .filter(game => game.status === 3)
    //     }
    //
    //     for (let i = 0; i < uniqueMatchIds.length; i++) {
    //         let id = uniqueMatchIds[i]
    //         let game = games.find(game => game.matchId === id)
    //         result.push(game)
    //     }
    //     result = result
    //         .filter(game => game.status !== 0)
    //         .filter(game => game.matchGroupType === 1)
    //         .filter(game => game.status === 3)
    //
    //
    //     return result
    // }

    render() {
        const tabs = this.state.tabs
        const currentTab = tabs.find(tab => tab.active === true)
        const dateString = currentTab.value
        const currentTabGames = this.props.game.games[dateString] ? this.props.game.games[dateString] : {}
        const {
            matches = [],
            events = {},
            stages = {},
            teams = {},
        } = currentTabGames

        const matchesToRender = matches
            .filter(match => match[2] === 8)


        // const gamesTemplate = matchesToRender.reverse().map(gameArr => {
        //     const gameObjInit = GameDataArrayToObject(gameArr)
        //     const gameObjFinal = GameDataObjectFinalized(gameObjInit, teams, events, stages)
        //     return <FootballGameCard game={gameObjFinal} key={gameObjFinal.matchId}/>
        // })
        const gamesTemplate = <EventFilterList
            matches={matchesToRender.reverse()}
            render={(matches) => {
                const hot = this.props.hot
                return matches.map(gameArr => {
                        const gameObjInit = GameDataArrayToObject(gameArr)
                        const gameObjFinal = GameDataObjectFinalized(gameObjInit, teams, events, stages)
                        if (hot) {
                            const hots = this.props.hots
                            const event = gameObjFinal.event
                            const names = [event.name_zh, event.short_name_zh,]
                            let isHot = false
                            names.map(name => {
                                hots.map(hot => {
                                    if (name === hot) {
                                        isHot = true
                                    }
                                })
                            })
                            if (isHot) {
                                return <FootballGameCard game={gameObjFinal} key={gameObjFinal.matchId}/>
                            } else {
                                return null
                            }
                        }
                        return <FootballGameCard game={gameObjFinal} key={gameObjFinal.matchId}/>
                    }
                )
            }}
        />

        return <div
            style={{
                height: '100%',
                overflow: 'hidden',
            }}
        >
            <DateTabs
                tabs={tabs}
                onTabSelected={this.onTabSelected}
                today={this.today}
            />
            <div
                style={{
                    height: 'calc(100% - 50px)',
                }}
                className='game-list-ctn'
                ref={el => this.container = el}
                // onScroll={e => this.fetchPrevSection()}
            >
                {matchesToRender.length > 0 ? gamesTemplate : <NoDataPage/>}
            </div>
        </div>
    }
}
const mapState = state => ({
    game: state.game,
    tabPosition: state.game.tabPosition,
})

const mapDispatch = dispatch => ({
    doFetchGameListAll: payload => dispatch.game.doFetchGameListAll(payload),
    changeGameTabPosition: (payload) => dispatch.game.changeGameTabPosition(payload),
    changeEventFilter: (payload) => dispatch.game.changeEventFilter(payload)
})

export default connect(
    mapState,
    mapDispatch
)(GameResult)
